<%= stylesheet_link_tag "playlists/_index" %>

<script type="text/javascript" charset="utf-8">
    bind_method(document, "keydown", goRoot);

    $(function () {
        $('.scroll-list').css('left', 0);
        var main = root.getWidgetById("main");
        main.focus()

        main.on("keydown", function (e) {
            e =e || window.event;
            var keyValue = e.which || e.keyCode;
            var data = e.target.con.dataset
            switch (keyValue) {
                case 13:
                    Cookies.set('prev', "<%= playlists_path %>")
                    Cookies.set("<%= playlists_path %>", "?row_index=" + data.row_index + "&item_index=" + data.item_index)
                    window.location.href = data.href;
            }
        });

        main.on("focus", function (e) {
            $(e.target.con).find(".marquee-truncate").marquee().trigger('forward').off('forward')
        });

        main.on("blur", function (e) {
            $(e.target.con).find(".marquee-truncate").trigger('reset').off('reset')
        });
    });
</script>

<div id="main" fe-role="Switch">
  <div class="playlist-scroll-v" fe-role="Scroll" fe-cfg="scroll_dir:v">
    <div class="scroll-list">

      <% @playlist_rows.each_with_index do |row, row_index| %>
        <div class="playlist-scroll-h" fe-role="Scroll"
             fe-cfg="scroll_dir:h,scroll_duration:0.3,scroll_easing:ease-out,<%= "default_focus:yes" if row_index === params[:row_index].to_i %>">
          <ul class="scroll-list clearfix" style="width: <%= row.size * 215 + 100 %>px;">

            <% row.each_with_index do |item, item_index| %>
              <li data-href="<%= playlist_path(id: item.id) %>"
                  data-row_index="<%= row_index %>"
                  data-item_index="<%= item_index %>"
                  class="playlist-tab"
                  fe-role="Widget"
                  fe-cfg="<%= "default_focus:yes" if item_index === params[:item_index].to_i %>"
              >

                <div class="playlist-tab-photo">
                  <div class="photo-mask"></div>
                  <%= image_tag("icons/播放_play.png", class: "play-icon") %>
                  <%= image_tag("/images/playlists/p#{item[:serial_id]}.jpeg", class: "playlist-tab-photo-img", onerror: "this.onerror=null;this.src='/singer_default.jpg';") %>
                </div>
<!--                歌单的播放量, 几十几十不好看, 应电信要求, 干脆屏蔽-->
<!--                <div class="playlist-tab-inner">-->
                  <%#= image_tag("icons/耳机_headset.png", class: "playlist-tab-inner-headphone") %>
<!--                  <div class="playlist-tab-inner-count"><%#= item[:fake_amount] + item[:view_amount] %></div>-->
<!--                </div>-->
                <div class="playlist-tab-outer">
                  <div class="marquee-truncate overflow-hidden">
                    <span class="marquee-content"><%= item[:name] %></span>
                  </div>
                </div>

              </li>
            <% end %>

          </ul>
        </div>
      <% end %>

    </div>
  </div>
</div>
